/*
  学习目标：使用JSX创建元素
  JSX:  在JS中可以写html代码
*/

import React from 'react';
import ReactDOM from 'react-dom';

const liNode1 = React.createElement('li', null, '香蕉1');
const liNode2 = React.createElement('li', null, '香蕉2');
const liNode3 = React.createElement('li', null, '香蕉3');

const ulNode1 = React.createElement(
  'ul',
  { className: 'list' },
  liNode1,
  liNode2,
  liNode3
);

const ulNode2 = (
  <p>
    <span>123</span>
    <h1>12312</h1>
  </p>
);

console.log('ulNode1  ----->  ', ulNode1);
console.log('ulNode2  ----->  ', ulNode2);

ReactDOM.render(ulNode2, document.getElementById('root'));
